<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
<s:admin pageName="account">
<jsp:attribute name="headPart">
	<link href="<c:url value="/resources/bootstrap/css/bootstrap-select.min.css" />" rel="stylesheet">
	<script src="<c:url value="/resources/bootstrap/js/bootstrap-select.min.js" />"></script>
	<script>
		var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}(\s(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3})*$/;
		var changeIP = function(){
			var ipText = $("#IPText");
			var ip = ipText.val();
			if(!ip){
				$("#alertDiv3").html('<div class="alert alert-warning" role="alert">Cannot be empty.</div>');
				return false;
			}
			if(reg.test(ip) === false){
				$("#alertDiv3").html('<div class="alert alert-warning" role="alert">Invalid format.</div>');
				return false;
			}
			
			return true;
			
		}
		
		var toChangeIP = function(id, ip){
			$("#accountId3").val(id);
			$("#IPText").val(ip);
			
		}
		
		var showWarning = function(msg){
			$("#alertDiv2").html('<div class="alert alert-warning" role="alert">' + msg + '</div>');
		}
		
		var changeToken = function(){
			if(!$("#tokenText").val()){
				showWarning("Cannot be empty.");
				return false;
			}
			return true;
		}
		
		var toChangeToken = function(id, token){
			$("#accountId2").val(id);
			$("#tokenText").val(token);
			
		}
		
		var guid = (function() {
		  function s4() {
		    return Math.floor((1 + Math.random()) * 0x10000)
		               .toString(16)
		               .substring(1);
		  }
		  return function() {
		    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
		           s4() + '-' + s4() + s4() + s4();
		  };
		})();
		
		var random = function(btn){
			$(btn).prev().children().val(guid());
		}
		
		var toEdit = function(id, clientName, token, ip){
			$("#accountId1").val(id);
			$("#clientName").val(clientName);
			$("#clientIP").val(ip);
			$("#clientToken").val(token);
			return true;
		}
		
		var saveClient = function(){
			if(!$("#clientName").val()){
				showWarning("Client name cannot be empty.");
				return false;
			}
			if(!$("#clientToken").val()){
				showWarning("Token cannot be empty.");
				return false;
			}
			if(!$("#clientIP").val()){
				showWarning("IP cannot be empty.");
				return false;
			}
			if(reg.test($("#clientIP").val()) === false){
				showWarning("Invalid format of IP");
				return false;
			}
			
			return true;
		}
		
		var removeClient = function(id){
			if(confirm("Are you sure to remove this record?")){
				location.href = '<c:url value="/account/remove?id="/>' + id;
			}
		}
	</script>
</jsp:attribute>
<jsp:body>
<div class="row main">
	<h4 class="page-header">Account</h4>
	
	<div class="col-md-offset-10 col-md-2" style="padding-bottom: 5px;">
		<button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#newClientModel">New Account</button>
	</div>
	
	<table class="table table-striped table-hover table-condensed">
		<tr>
			<th class="col-md-3">Client Name</th>
			<th class="col-md-4">Token</th>
			<th class="col-md-2">IP</th>
			<th class="col-md-3">Operation</th>
		</tr>
		<c:forEach items="${list}" var="c">
			<tr id="${c.id}">
				<td><a href="<c:url value="/account/urls?token=${c.token}"/>" target="_blank">${c.clientName }</a></td>
				<td>${c.token }</td>
				<td>${c.ip }</td>
				<td>
					<a class="btn btn-default btn-xs" href='<c:url value="/account/visit/sum?id=${c.id}"/>' title="view visits">
	                     <span class="glyphicon glyphicon-zoom-in table-item-icon"></span>
					</a>
					<a class="btn btn-default btn-xs" href='#' data-toggle="modal" data-target="#tokenModel" onclick="toChangeToken(${c.id}, '${c.token}')" title="change token">
	                     <span class="glyphicon glyphicon-tags table-item-icon"></span>
					</a>
					<a class="btn btn-default btn-xs" href='#' data-toggle="modal" data-target="#IPModel" onclick="toChangeIP(${c.id}, '${c.ip}')" title="change IP">
	                     <span class="glyphicon glyphicon-globe table-item-icon"></span>
					</a>
					&nbsp;&nbsp;
					<a class="btn btn-default btn-xs" data-toggle="modal" data-target="#newClientModel" onclick="toEdit(${c.id}, '${c.clientName}', '${c.token}', '${c.ip}')" title="edit">
	                     <span class="glyphicon glyphicon-edit table-item-icon"></span>
					</a>
					<a class="btn btn-default btn-xs" href='#' onclick="removeClient(${c.id})" title="remove">
	                     <span class="glyphicon glyphicon-remove table-item-icon"></span>
					</a>
				</td>
			</tr>
		</c:forEach>
	</table>
</div>

<!-- New Client Modal -->
<form class="form-horizontal" action="<c:url value="/account/save" />" method="POST">
	<div class="modal fade" id="newClientModel" tabindex="-1" role="dialog" aria-labelledby="newClientLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="newClientLabel">New Client</h4>
	      </div>
	      <div class="modal-body">
	      	<input id="accountId1" name="id" value="0" type="hidden">
	      	<div id="alertDiv" class="col-md-11"></div>
	      	<div class="form-group">
	      		<label for="clientName" class="col-md-3 control-label">Client Name</label>
		      	<div class="col-md-7">
		        	<input id="clientName" name="clientName" class="form-control" type="text">
		        </div>
	        </div>
	      	<div class="form-group">
	      		<label for="clientToken" class="col-md-3 control-label">Token</label>
		      	<div class="col-md-7">
		        	<input id="clientToken" name="token" class="form-control" type="text">
		        </div>
	        	<input type="button" class="btn btn-default" value="random" onclick="random(this)">
	        </div>
	      	<div class="form-group">
	      		<label for="clientIP" class="col-md-3 control-label">IP</label>
		      	<div class="col-md-7">
		        	<input id="clientIP" name="ip" class="form-control" type="text">
		        </div>
	        </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="submit" class="btn btn-primary" onclick="return saveClient()">Save change</button>
	      </div>
	    </div>
	  </div>
	</div>
</form>

<!-- Token Modal -->
<form action="<c:url value="/account/token" />" method="POST">
	<div class="modal fade" id="tokenModel" tabindex="-1" role="dialog" aria-labelledby="tokenModelLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="tokenModelLabel">Change token</h4>
	      </div>
	      <div class="modal-body">
	      	<div id="alertDiv2" class="col-md-11"></div>
	      	<div class="row">
	      		<input id="accountId2" name="id" type="hidden">
		      	<div class="col-md-offset-1 col-md-7">
		        	<input id="tokenText" name="token" class="form-control" type="text">
		        </div>
		        <input type="button" class="btn btn-default" value="random" onclick="random(this)">
	        </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="submit" class="btn btn-primary" onclick="return changeToken()">Save change</button>
	      </div>
	    </div>
	  </div>
	</div>
</form>

<!-- IP Modal -->
<form action="<c:url value="/account/ip" />" method="POST">
	<div class="modal fade" id="IPModel" tabindex="-1" role="dialog" aria-labelledby="IPModelLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="IPModelLabel">Change IP</h4>
	      </div>
	      <div class="modal-body">
	      	<div id="alertDiv3" class="col-md-11"></div>
	      	<div class="row">
		      	<div class="col-md-offset-1 col-md-7">
		      		<input id="accountId3" name="id" type="hidden">
		        	<input id="IPText" name="ip" class="form-control" type="text">
		        	<div class="help-block">e.g. 202.143.120.110</div>
		        </div>
	        </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="submit" class="btn btn-primary" onclick="return changeIP()">Save change</button>
	      </div>
	    </div>
	  </div>
	</div>
</form>
</jsp:body>
</s:admin>
